<template>
  <div style="padding:0px;">
    <el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
      <el-card class="box-card">
        <div class="text item">
          <el-form-item label="使用者姓名" prop="person">
            <el-input :maxlength="20" v-model="dialogForm.person" auto-complete="off" :disabled="!basicDialogFormVisible.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input :maxlength="11" v-model="dialogForm.phone" auto-complete="off" :disabled="!basicDialogFormVisible.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="使用者身份证号码" prop="idCard">
            <el-input :maxlength="18" v-model="dialogForm.idCard" auto-complete="off" :disabled="!basicDialogFormVisible.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" prop="password" :rules="this.basicDialogFormVisible.id===''?rules.password:[{ required: false}]">
            <input type="text" style="position:absolute;right:10000px;">
            <el-input v-model="dialogForm.password" :maxlength="20" type="password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="经销商类别" prop="category">
            <el-select v-model="dialogForm.category" placeholder="请选择经销商类别" :disabled="!basicDialogFormVisible.isAdd">
              <el-option label="请选择经销商类别" value="">
              </el-option>
              <el-option v-for="(item, index) in type" :label="item" :value="index-0" :key="index">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="* 使用者身份证照片">
            <qiniu  :qiniuImage="qiniuImage" :packJson="packJson2" :id="qiniuImage.id" canDelete="true"></qiniu>
          </el-form-item>
        </div>
      </el-card>
      <div style="text-align:right;margin-top:15px;">
        <el-button @click="returnBack">返 回</el-button>
        <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import router from '@/router';
  import agentHttp from '@/utils/agentHttp.js'
	import qiniu from '@/views/qiniu/upload';
  import {
    require,
    phone,
    decimalFour,
    numOrEnglish,
    max100,
    isCard
  } from '@/utils/rules.js'
  export default {
    created() {

      this.$set(this.dialogForm, 'isRegister', true);
      if (this.basicDialogFormVisible.id !== "") {
        //修改
        this.selectData();
      } else {
        this.get_status_map();
      }

    },
    props: ['basicDialogFormVisible'],
    data() {
      return {
        formLabelWidth: '170px',
        type: {},
        //弹窗或者查看页面信息
        dialogForm: {
          person: "",
          phone: "",
          idCard: '',
          password: "",
          category: "",
		},
		qiniuImage:{
			id: Math.random() * 100,
			image_uri:[]
		},
        rules: {
          password: [require('登陆密码')],
          person: [require('使用者姓名')],
          phone: [require('手机号码', {
            trigger: "blur"
          }), {
            validator: phone,
            trigger: "blur"
          }],
          idCard: [require("身份证号码", {
            trigger: "blur"
          }), {
            validator: isCard,
            trigger: "blur"
          }],
          category: [require('经销商类别', {
            type: "number",
            trigger: "change"
          })],
        },
        packJson2: {
          maxLength: 50, //最大图片数量
          minLength: 5, //最大图片数量
          accept: "", //image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
          size: 4, //图片大小  单位兆
        },

      }
    },
    methods: {

      returnBack() {
        this.basicDialogFormVisible.dialogFormVisible = false;
      },
      submitConfirmForm(formName) {

        this.$refs[formName].validate((valid) => {
		
          if (valid) {
            this.postAjax();
          } else {
            return false;
          }
        });
      },
      selectData() {
        agentHttp.get('adminApi/admin/dealer/select_dealer/' + this.basicDialogFormVisible.id).then((data) => {
          if (data.success) {
            this.dialogForm = data.data.dealer;
            this.type = data.data.type;
            this.dialogForm.password = '';
			      this.qiniuImage.image_uri = this.dialogForm.idCardPic?this.dialogForm.idCardPic.split(',').notempty():[]
          }
        })
      },
      get_status_map() {      //获取经销商类别
        agentHttp.get('adminApi/admin/dealer_ordinary/get_status_map').then((data) => {
          if (data.success) {
              this.type = data.data.category
          }
        })
      },
      postAjax(){     //提交数据

        const params = {
              "category": this.dialogForm.category,
              "id": this.dialogForm.id,
              "idCard": this.dialogForm.idCard,
              "idCardPic":this.qiniuImage.image_uri.join(","),
              "password": this.dialogForm.password,
              "person": this.dialogForm.person,
              "phone": this.dialogForm.phone
            }
         if( this.selectImageUrl()){
          if(this.basicDialogFormVisible.id !== ""){      //修改

                  agentHttp.putJson('adminApi/admin/dealer_ordinary/update', params).then((data) => {
                  this.basicDialogFormVisible.dialogFormVisible = false;
                  this.$message.success(data.data || "提交成功");
                  this.$emit('Refresh', null);
                })
          }else{    //添加
                 agentHttp.postJson('adminApi/admin/dealer_ordinary/add', params).then((data) => {
                  this.basicDialogFormVisible.dialogFormVisible = false;
                  this.$message.success(data.data || "添加成功");
                  this.$emit('Refresh', null);
                })
          }

         }
      },
      selectImageUrl() {
        this.dialogForm.businessLicense = this.qiniuImage.image_uri.join(",");
        if (this.dialogForm.businessLicense.length < 1) {
          this.$message.warning('身份证图片至少一张');
          return false;
        }
        return true;
      },

	},
	components:{
		qiniu
	}
  };

</script>
